<template>
    <div>
        <van-nav-bar
                title="物流消息"
                left-text="返回"
                right-text=""
                left-arrow
                @click-left="onClickLeft"
               />
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        > <van-row type="flex" justify="center" v-for="item in list" :key="item.orderId" @click="tiaoZhuan(item)">
                    <van-col class="order" span="22">
                        <div>
                            订单配送中...
                        </div>
                        <van-card
                                :desc="'订单编号：'+item.orderCode"
                                :title="item.goodsName"
                                :thumb="'/tu' +item.goods">
                        </van-card>
                    </van-col>
    </van-row>
        </van-list>
    </div>

</template>

<script>
    import logisticsStatus from "./logisticsStatus";

    export default {
        name: "logisticsNews",
        data() {
            return {
                active: 0,
                icon: {
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                },
                list: [],
                loading: false,
                finished: false,
                arr:[],
                tim:[]
            };
        },
        methods:{
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        if (this.list.length==this.tim.length){
                            break;
                        }else{
                            this.list.push(this.tim[i]);
                        }
                    }

                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= this.tim.length) {
                        this.finished = true;
                    }
                }, 1000);
            },
            tiaoZhuan(item){
                this.$router.push({name:'logisticsStatus',params:{orderStatus:item.orderStatus}})
            },
            onClickLeft(){
                this.$router.push({name:'message'})
            }
        },
        created() {

            this.$axios.post('/api/marketOrder/myOrderList?userId='+3).then((res)=>{
                console.log(res.data.data)
                this.arr=res.data.data
                this.arr.forEach((item)=>{
                    if (item.orderStatus==0){

                    }else{
                        item.goodsName=item.goods.goodsName
                        item.goods=item.goods.goodsImg
                        this.tim.push(item)
                    }
                })
                // setTimeout(console.log(this.list),1000)
            })
        }
    }
</script>

<style scoped>
    .van-card__desc {
        max-height: 70px;
        color: #646566;
        line-height: 90px;
        font-size: 15px;
    }
    .van-card{
        background-color: #fff9f7;
        border-radius: 8px;
        font-size: 15px;
    }
    .van-card__title{
        font-size: 20px;
        line-height: 27px;
    }

    .order{
        box-shadow: 0 0 18px 18px #f2f2f2;
        border-radius: 8px;
        margin-bottom: 20px;
        padding:10px;
    }
</style>